<template>
  <page-wrap stayStill back hide-tab title="求职意向" bg-color="#FFF">
    <view class="aim">
      <view class="aim-top">
        <view class="aim-desc">
          <!-- <view class="desc-count" :style="'top:' + navHeight + 'px;'">{{ allAimList.length }} / 3</view> -->
          <view class="desc-title">管理求职意向 <text class="desc-num">(<text
                class="desc-num-text">{{ allAimList.length }}</text>/3)</text> </view>
          <view class="desc-text">添加多个求职意向，可以匹配到更多合适的高薪岗位</view>
        </view>
        <view class="aim-status">
          <!-- 不能使用循环，有兼容bug -->
          <view class="status" @click="showType = true">
            <view class="status-left">求职状态</view>
            <u-select v-model="showType" :list="aimList" :confirm-color="confirmColor" cancel-color="#555555"
              safe-area-inset-bottom @confirm="handleStatus($event, 'type')"></u-select>
            <view :class="[
                'status-text status-db',
                { placeholder: status.type === '' },
              ]">
              {{ handleLabel("type", aimList) }}
            </view>
          </view>
          <view class="status u-border-bottom" @click="showTime = true" v-show="status.type && status.type != 6">
            <view class="status-left">到岗日期</view>
            <u-select v-model="showTime" :list="timeAimList" :confirm-color="confirmColor" cancel-color="#555555"
              safe-area-inset-bottom @confirm="handleStatus($event, 'time')"></u-select>
            <view :class="[
                'status-text status-db',
                { placeholder: status.time === '' },
              ]">
              {{ handleLabel("time", timeAimList) }}
            </view>
          </view>
        </view>
        <view class="aim-list" v-if="allAimList.length > 0">
          <view class="aim-item" v-for="(item, index) in allAimList" :key="index" @click="handleAddOrEdit(item)">
            <view class="item-info">
              <view class="info-top">{{ item.zwname }}</view>
              <view class="info-middle">
                <text class="salary">{{ item.salary_str }}</text>
                <text class="info-middle-line"></text>
                <text class="region">{{ item.cityName }}</text>
              </view>
              <view class="info-bottom">{{ item.tradeName }}</view>
            </view>
            <text class="item-arrow"></text>
          </view>
        </view>
      </view>

      <view class="aim-add" v-if="allAimList.length < 3" @click="handleAddOrEdit(null)">
        <!-- <text class="add-icon"></text> -->
        <text class="add-text">{{
          allAimList.length ? "继续添加" : "添加求职意向"
        }}</text>
      </view>
    </view>

  </page-wrap>
</template>

<script>
import { aimList, stuAimList, timeAimList } from "@/utils/data";
import { getMyIntendedTradeList, updateStatusAndWorkData } from "@/api/index";
import ShareMixin from "@/mixins/share";
export default {
  mixins: [ShareMixin],
  data() {
    return {
      showTop: false,
      aimList,
      timeAimList,
      navHeight: getApp().globalData.navHeight,
      showType: false,
      showTime: false,
      status: {
        type: "",
        time: "",
      },
      allAimList: [],
      confirmColor: this.$primaryColor,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
    };
  },
  created() {
    let userInfo = getApp().globalData.userInfo;
    let trueAimList = +userInfo.rctypeId ? aimList : stuAimList;
    this.aimList = trueAimList;
  },
  mounted() {
    // this.getMyIntendedTradeList();
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  onShow() {
    this.getMyIntendedTradeList();
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   }
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   }
  // },
  methods: {
    getMyIntendedTradeList() {
      let param = {
        person_id: this.personId,
      };
      getMyIntendedTradeList(param).then((res) => {
        if (+res.code === 200) {
          this.status = {
            type: +res.data.personInfo.person_status,
            time: res.data.personInfo.workdate,
          };
          this.allAimList = res.data.myTended || [];
        }
      });
    },
    handleStatus(data, prop) {
      this.$set(this.status, prop, data[0].value);
      let param = {
        person_id: this.personId,
        conditionArr: JSON.stringify({
          person_status: this.status.type,
          workdate: this.status.time,
        }),
      };
      updateStatusAndWorkData(param);
    },
    handleLabel(prop, data) {
      let item = data.find((ele) => ele.value == this.status[prop]);
      return item ? item.label : "请选择";
    },
    handleAddOrEdit(item) {
      let url = "/pagesSub/resume/aimItem/index";
      if (item) {
        url += `?aimId=${item.intended_id}`;
      }
      uni.navigateTo({ url });
    },
  },
};
</script>

<style lang="scss">
$img-base-aim: $img-base + "resume/aim/";
// @include img-base-self(".aim .aim-desc", "resume/aim/bg.png");
@include img-base-self(".aim .aim-add .add-icon", "resume/aim/add.png");
.aim {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24rpx;
  background-color: #fff;
  .aim-desc {
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-end;
    position: relative;
    padding: 0 32rpx 30rpx;
    // height: 360rpx;
    /* #ifdef MP-WEIXIN */
    // height: 440rpx;
    /* #endif */
    // color: #ffffff;
    background-size: 100% 100%;
    box-sizing: border-box;
    overflow: hidden;
    .desc-count {
      position: absolute;
      right: 32rpx;
      top: 44rpx;
      /* #ifdef MP-WEIXIN */
      top: 132rpx;
      /* #endif */
      text-align: right;
      font-size: $uni-font-size-big;
      z-index: 1;
    }
    .desc-num {
      margin-left: 20rpx;
      font-weight: normal;
      color: #999;
      &-text {
        color: $u-type-primary;
      }
    }
    .desc-title {
      margin-bottom: 22rpx;
      font-size: 48rpx;
      font-weight: bold;
    }
    .desc-text {
      font-size: $uni-font-size-base;
      color: #999;
    }
  }
  .aim-status {
    position: relative;
    margin: 0 32rpx 48rpx;
    background: $uni-bg-color;
    border-radius: 24rpx;
    .status {
      display: flex;
      align-items: center;
      padding: 8rpx 0;
      &:last-of-type {
        padding-bottom: 30rpx;
      }
      .status-left {
        flex-shrink: 0;
        font-weight: bold;
      }
      .status-db {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #999;
        &.placeholder {
          color: $uni-text-color-888;
        }
        &::after {
          content: "";
          display: inline-block;
          margin-left: 8rpx;
          width: 28rpx;
          height: 28rpx;
          background-image: url($img-base-aim + "picker.png");
          background-size: 100% 100%;
        }
      }
    }
  }
  .aim-list {
    padding: 0 32rpx;
    .aim-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;
      padding: 32rpx;
      background: $uni-bg-color;
      border-radius: 24rpx;
      box-shadow: 0px 10rpx 30rpx 2rpx #eee;
      .item-info {
        flex-grow: 1;
        width: calc(100% - 48rpx);
        color: $uni-text-color-222;
        .info-top {
          font-size: $uni-font-size-lg;
          line-height: $uni-font-size-lg;
          font-weight: bold;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .info-middle {
          margin-top: 24rpx;
          font-size: $uni-font-size-base;
          line-height: $uni-font-size-base;
          color: #666;
          &-line {
            display: inline-block;
            margin: 0 16rpx;
            background-color: #999;
            width: 2rpx;
            height: 20rpx;
          }
          .region {
            margin-right: 16rpx;
          }
        }
        .info-bottom {
          margin-top: 24rpx;
          font-size: $uni-font-size-sm;
          line-height: $uni-font-size-sm;
          color: $uni-text-color-999;
        }
      }
      .item-arrow {
        flex-shrink: 0;
        width: 40rpx;
        height: 40rpx;
        background-image: url($img-base-aim + "edit.png");
        background-size: 100% 100%;
      }
    }
  }
  .aim-add {
    height: 88rpx;
    line-height: 88rpx;
    margin: 0 32rpx;
    background: $bg-linear-gradient-button;
    text-align: center;
    color: #fff;
    font-size: $uni-font-size-base;
    font-weight: bold;
    border-radius: 44rpx;
    .add-icon {
      margin-right: 12rpx;
      width: 32rpx;
      height: 32rpx;
      background-size: 100% 100%;
    }
  }
}
</style>

